<template>
    <section class="seckill-product-box">
      <div class="product-box pr" v-for="(item,index) in productList" :key="index">
        <img :src="item.imgSrc" alt="">
        <div class="msg inline-block pr">
          <p class="product-name clamp2">{{item.name}}</p>
          <p>
            <span class="progress inline-block pr">
              <Progress :value="item.percent"></Progress>
            </span>
            <span class="fs12 color7A7B82 bought-num">
              已抢{{item.bought_num}}件
            </span>
          </p>
          <p class="price pa">
            <span class="fs14 color45454D"><i class="fs12">￥</i>{{item.current_price | decimals}}</span>
            <del class="color7A7B82 fs12">￥{{item.original_price}}</del>
            <span class="flr fs14 btn inline-block text-c" @click="sendId(item)">马上抢<i class="iconfont icongengduox fs12"></i></span>
          </p>
        </div>
      </div>
    </section>
</template>

<script type="text/ecmascript-6">
  import Progress from './Progress.vue'

  export default {
    components:{
      Progress,
    },
    data() {
      return {

      }
    },
    props:['productList'],
    filters:{
      decimals(value){
        return Number(value).toFixed(2)
      }
    },
    methods: {
      sendId(item){
        this.$emit('send-id',{item:item})
      },
    },
  }
</script>

<style scoped lang="scss">
  @import '../assets/css/base.scss';

  .seckill-product-box{

    .product-box{
      width: 100%;
      height: 136px;
      padding:8px 15px;
      box-sizing: border-box;

      img{
        width: 120px;
        height: 120px;
        vertical-align: middle;
      }

      .msg{
        width:calc(100% - 128px);
        height: 120px;
        padding-left: 4px;
        box-sizing: border-box;

        .product-name{
          width: 100%;
          height: 42px;
        }

        .progress{
          top:2px;
          left:0;
          width: 120px;
          height: 12px;
        }

        .bought-num{
          margin-left: 5px;
        }
      }

      .price{
        bottom:10px;
        left:0;
        width: 100%;

        i{
          font-style:normal;
        }

        .btn{
          background: linear-gradient(right,#A182FF,#7E82F6);
          width: 67px;
          height: 26px;
          line-height: 26px;
          color: #fff;
          border-radius: 4px;
        }
      }
    }

    .product-box::before{
      content:'';
      position: absolute;
      bottom:0;
      right:0;
      background: #E8E8E8;
      height: 1px;
      width:calc(100% - 143px);
    }
  }
</style>
